<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table下拉选择器</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.8/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <blockquote class="layui-elem-quote">
            xmSelect下拉多选<br>
            下拉多选解决方案 1.多选, 单选, 重复选 2.分组, 远程搜索, 本地搜索, 分页 3.自定义主题, 工具条 4.下拉树，下拉任意 ... 让下拉选择变成一种艺术^_^<br>
            <a href="https://maplemei.gitee.io/xm-select/#/component/options" target="_blank" class="layui-btn layui-btn-danger">xmSelect下拉选择</a>
        </blockquote>

        <form class="layui-form" action="" style="padding:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">多选</label>
                <div class="layui-input-inline">
                    <div id="demo1" ></div>

                </div>
                <div class="layui-form-mid layui-word-aux">多选</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单选</label>
                <div class="layui-input-inline">
                    <div id="demo2" ></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">搜索单选</label>
                <div class="layui-input-inline">
                    <div id="demo3" ></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">远程搜索多选</label>
                <div class="layui-input-inline">
                    <div id="demo4" ></div>
                </div>
            </div>

        </form>

        <pre class="layui-code">
 layui.use(['table', 'form', 'xmSelect'], function () {
        var $ = layui.jquery, xmSelect = layui.xmSelect;

        //渲染多选
        var demo1 = xmSelect.render({
            el: '#demo1',
            name:'input_name',//input
            max:2,//多选限制
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
        //渲染单选
        var demo2 = xmSelect.render({
            el: '#demo2',
            radio: true,//单选
            toolbar: {show: true},
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
        //搜索渲染单选
        var demo2 = xmSelect.render({
            el: '#demo3',
            radio: true,
            toolbar: {show: true},
            filterable: true,//搜索
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
        //远程多选
        var demo3 = xmSelect.render({
            el: '#demo4',
            toolbar: { show: true },
            filterable: true,//搜索
            remoteSearch: true,//是否开启自定义搜索 (远程搜索)
            direction:'down',
            remoteMethod: function(val, cb, show){//自定义搜索回调函数
                $.ajax({
                    type: 'get',
                    url: '../api/xm-select.json',
                    data: {keyword:val},
                    cache: false, //不缓存此页面
                    success: function(data) {
                        console.log(data);
                        cb(data.data)
                    }
                });
            },
        })
    });
        </pre>

    </div>
</div>

<script src="../lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'xmSelect'], function () {
        var $ = layui.jquery, xmSelect = layui.xmSelect;

        //渲染多选
        var demo1 = xmSelect.render({
            el: '#demo1',
            name:'input_name',//input
            max:2,//多选限制
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
        //渲染单选
        var demo2 = xmSelect.render({
            el: '#demo2',
            radio: true,//单选
            toolbar: {show: true},
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
        //搜索渲染单选
        var demo2 = xmSelect.render({
            el: '#demo3',
            radio: true,
            toolbar: {show: true},
            filterable: true,//搜索
            data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
            ]
        })
        //远程多选
        var demo3 = xmSelect.render({
            el: '#demo4',
            toolbar: { show: true },
            filterable: true,//搜索
            remoteSearch: true,//是否开启自定义搜索 (远程搜索)
            direction:'down',
            remoteMethod: function(val, cb, show){//自定义搜索回调函数
                $.ajax({
                    type: 'get',
                    url: '../api/xm-select.json',
                    data: {keyword:val},
                    cache: false, //不缓存此页面
                    success: function(data) {
                        console.log(data);
                        cb(data.data)
                    }
                });
            },
        })
    });
</script>
</body>
</html>